---
title: Пункт меню
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Универсальный пункт меню, предназначенный для использования в меню или списке навигации.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Свойства            | Тип             | Описание                                                                                                           |
| ------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ |
| LeftIcon            | ИконкаКомпонент | Необязательная иконка слева, отображаемая перед текстом в пункте меню                                              |
| акцент              | строка          | Указывает цвет акцента пункта меню. Варианты: `default`, `danger`, и `placeholder` |
| текст               | строка          | Текстовое содержание пункта меню                                                                                   |
| кнопки с иконками   | массив          | Массив объектов, представляющих дополнительные кнопки с иконками, связанные с пунктом меню                         |
| открытаПодсказка    | boolean         | Управляет видимостью подсказки, связанной с пунктом меню                                                           |
| идентификатор теста | строка          | Атрибут data-testid для тестирования                                                                               |
| onClick             | функция         | Функция обратного вызова, вызываемая при нажатии на пункт меню                                                     |
| className           | строка          | Необязательное имя для дополнительной стилизации                                                                   |

</Tab>
</Tabs>

## Варианты

Различные варианты компонентов меню включают следующее:

### Команда

Командный стиль пункта меню в меню для указания сочетаний клавиш.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Свойства             | Тип             | Описание                                                              |
| -------------------- | --------------- | --------------------------------------------------------------------- |
| LeftIcon             | ИконкаКомпонент | Необязательная иконка слева, отображаемая перед текстом в пункте меню |
| текст                | строка          | Текстовое содержание пункта меню                                      |
| перваяГорячаяКлавиша | строка          | Первая горячая клавиша, связанная с командой                          |
| втораяГорячаяКлавиша | строка          | Вторая горячая клавиша, связанная с командой                          |
| выбрано              | boolean         | Указывает, выбран ли пункт меню                                       |
| onClick              | функция         | Функция обратного вызова, вызываемая при нажатии на пункт меню        |
| className            | строка          | Необязательное имя для дополнительной стилизации                      |

</Tab>
</Tabs>

### Перетаскиваемый

Пункт меню, который можно перетаскивать, предназначен для использования в меню или списке, где элементы могут быть перетащены, и дополнительные действия могут быть выполнены через кнопки с иконками.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Свойства                | Тип             | Описание                                                                                          |
| ----------------------- | --------------- | ------------------------------------------------------------------------------------------------- |
| LeftIcon                | ИконкаКомпонент | Необязательная иконка слева, отображаемая перед текстом в пункте меню                             |
| акцент                  | строка          | Цвет акцента пункта меню. It can either be `default`, `placeholder`, and `danger` |
| кнопки с иконками       | массив          | Массив объектов, представляющих дополнительные кнопки с иконками, связанные с пунктом меню        |
| открытаПодсказка        | boolean         | Управляет видимостью подсказки, связанной с пунктом меню                                          |
| onClick                 | функция         | Функция обратного вызова, выполняемая при клике по ссылке                                         |
| текст                   | строка          | Текстовое содержание пункта меню                                                                  |
| перетаскиваниеОтключено | boolean         | Указывает, отключено ли перетаскивание                                                            |
| className               | строка          | Необязательное имя для дополнительной стилизации                                                  |

</Tab>
</Tabs>

### Множественный выбор

Предоставляет способ реализации функционала множественного выбора с использованием ассоциированного флажка.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Свойства       | Тип             | Описание                                                              |
| -------------- | --------------- | --------------------------------------------------------------------- |
| LeftIcon       | ИконкаКомпонент | Необязательная иконка слева, отображаемая перед текстом в пункте меню |
| текст          | строка          | Текстовое содержание пункта меню                                      |
| выбран         | boolean         | Указывает, выбран ли пункт меню (отмечен)          |
| onSelectChange | функция         | Функция обратного вызова, вызываемая при изменении состояния флажка   |
| className      | строка          | Необязательное имя для дополнительной стилизации                      |

</Tab>
</Tabs>

### Множественный выбор с аватаром

Элемент меню с множественным выбором, имеющий аватар, флажок для выбора и текстовое содержание.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Свойства       | Тип         | Описание                                                            |
| -------------- | ----------- | ------------------------------------------------------------------- |
| аватар         | `ReactNode` | Аватар или иконка, отображаемые слева от пункта меню                |
| текст          | строка      | Текстовое содержание пункта меню                                    |
| выбран         | boolean     | Указывает, выбран ли пункт меню (отмечен)        |
| onSelectChange | функция     | Функция обратного вызова, вызываемая при изменении состояния флажка |
| className      | строка      | Необязательное имя для дополнительной стилизации                    |

</Tab>
</Tabs>

### Навигация

Пункт меню с опциональной левой иконкой, текстовым содержанием и иконкой "стрелка вправо".

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Свойства  | Тип             | Описание                                                              |
| --------- | --------------- | --------------------------------------------------------------------- |
| LeftIcon  | ИконкаКомпонент | Необязательная иконка слева, отображаемая перед текстом в пункте меню |
| текст     | строка          | Текстовое содержание пункта меню                                      |
| onClick   | функция         | Функция обратного вызова, вызываемая при нажатии на пункт меню        |
| className | строка          | Необязательное имя для дополнительной стилизации                      |

</Tab>
</Tabs>

### Выбрать

Выбираемый элемент меню, с опциональным левым содержанием (иконка и текст) и индикатором (иконкой "галочка") для отображения статуса выбора.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Свойства  | Тип             | Описание                                                              |
| --------- | --------------- | --------------------------------------------------------------------- |
| LeftIcon  | ИконкаКомпонент | Необязательная иконка слева, отображаемая перед текстом в пункте меню |
| текст     | строка          | Текстовое содержание пункта меню                                      |
| выбран    | boolean         | Указывает, выбран ли пункт меню (отмечен)          |
| отключено | boolean         | Указывает, отключен ли пункт меню                                     |
| hovered   | boolean         | Указывает, наведено ли в данный момент на пункт меню                  |
| onClick   | функция         | Функция обратного вызова, вызываемая при нажатии на пункт меню        |
| className | строка          | Необязательное имя для дополнительной стилизации                      |

</Tab>
</Tabs>

### Select Avatar

Выбираемый элемент меню с аватаром, с опциональным левым содержанием (аватар и текст) и индикатором (иконка "галочка") для отображения статуса выбора.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Свойства            | Тип         | Описание                                                       |
| ------------------- | ----------- | -------------------------------------------------------------- |
| аватар              | `ReactNode` | Аватар или иконка, отображаемые слева от пункта меню           |
| текст               | строка      | Текстовое содержание пункта меню                               |
| выбран              | boolean     | Указывает, выбран ли пункт меню (отмечен)   |
| отключено           | boolean     | Указывает, отключен ли пункт меню                              |
| hovered             | boolean     | Указывает, наведено ли в данный момент на пункт меню           |
| идентификатор теста | строка      | Атрибут data-testid для тестирования                           |
| onClick             | функция     | Функция обратного вызова, вызываемая при нажатии на пункт меню |
| className           | строка      | Необязательное имя для дополнительной стилизации               |

</Tab>
</Tabs>

### Select Color

Выбираемый элемент меню с образцом цвета, для ситуаций, когда пользователям нужно выбрать цвет из меню.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Свойства  | Тип     | Описание                                                                                                                                                                                                                                               |
| --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| цвет      | строка  | Цвет темы, который отображается как пример в пункте меню. Доступные варианты: `зелёный`, `бирюзовый`, `небесно-голубой`, `синий`, `фиолетовый`, `розовый`, `красный`, `оранжевый`, `жёлтый` и `серый`. |
| выбран    | boolean | Указывает, выбран ли пункт меню (отмечен)                                                                                                                                                                                           |
| отключено | boolean | Указывает, отключен ли пункт меню                                                                                                                                                                                                                      |
| hovered   | boolean | Указывает, наведено ли в данный момент на пункт меню                                                                                                                                                                                                   |
| вариант   | строка  | Вариант цветового образца. Это может быть либо `по умолчанию`, либо `конвейер`.                                                                                                                                        |
| onClick   | функция | Функция обратного вызова, вызываемая при нажатии на пункт меню                                                                                                                                                                                         |
| className | строка  | Необязательное имя для дополнительной стилизации                                                                                                                                                                                                       |

</Tab>
</Tabs>

### Переключатель

Элемент меню с переключателем для активации или деактивации определенной функции

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Свойства            | Тип             | Описание                                                                                          |
| ------------------- | --------------- | ------------------------------------------------------------------------------------------------- |
| LeftIcon            | ИконкаКомпонент | Необязательная иконка слева, отображаемая перед текстом в пункте меню                             |
| текст               | строка          | Текстовое содержание пункта меню                                                                  |
| переключено         | boolean         | Указывает, в каком состоянии находится переключатель, "включено" или "выключено". |
| onToggleChange      | функция         | Функция обратного вызова, вызываемая при изменении состояния переключателя                        |
| размерПереключателя | строка          | Размер переключателя. It can be either \                                         |
| className           | строка          | Необязательное имя для дополнительной стилизации                                                  |

</Tab>
</Tabs>
